<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>概况</title>
		<meta name="Author" content="余光cc" /> 
        <meta name="Copyright" content="网站版权" /> 
        <meta name="keywords" content="网站关键字" />
        <meta name="description" content="网站描述" />
        <link rel="Shortcut Icon" href="网站.ico图标路径" />
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/survey.css"/>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	</head>
	<body>
	<div class="box" style="background: url(images/survey.png) no-repeat;">
		<div class="box-back">
			返回
		</div>
		<div class="box-top">
			<div class="box-top-item">
				<h3>·&nbsp;党总支&nbsp;·</h3>
				<p>15</p>
			</div>
			<div class="box-top-item">
				<h3>·&nbsp;党支部&nbsp;·</h3>
				<p>169</p>
			</div>
			<div class="box-top-item">
				<h3>·&nbsp;党员&nbsp;·</h3>
				<p>12981</p>
			</div>
			<div class="box-top-item">
				<h3>·&nbsp;优秀党支部&nbsp;·</h3>
				<p>30</p>
			</div>
			<div class="box-top-item">
				<h3>·&nbsp;优秀党员&nbsp;·</h3>
				<p>219</p>
			</div>
		</div>
		<div class="box-cont">
			<div class="box-cont-left">
				<div id="container" style="height: 100%"></div>
			</div>
			<div class="box-cont-right">
				 <div id="container2" style="height: 100%"></div>
			</div>
			<div class="box-cont-bottom">
				<h3>党员缴费情况</h3>
				<div class="b-c-b-left">
					<div class="b-c-b-l-cont" id="LAY_demo1">
						
					</div>
					<div class="b-c-b-left-info"><i class="line"></i>已缴党费<p></p><i class="line"></i>未缴党费</div>
				</div>
				
			</div>
		</div>
	</div>
	<script src="js/jquery-3.3.1-min.js" type="text/javascript" charset="utf-8"></script>
	<script src="layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('.box-back').on('click',function(){
			window.history.go(-1);
		})
		layui.use('flow', function(){
		  var flow = layui.flow;
		  var pageNum = 16;
		  flow.load({
		    elem: '#LAY_demo1' //流加载容器
		    ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
		    ,done: function(page, next){ //执行下一页的回调
		      $.ajax({
		      	type:"post",
		      	url:"http://www.shopyun.top:8011/dp/api/humanList",
		      	data:{page:page},
		      	async:true,
		      	success:function(data){
		      		console.log(data);
		      		var lis = [];
		      		$.each(data.list, function(i,v) {
		      			if(v.ismoney == 0){
		      				lis.push('<span class="wj">'+v.name+'</span>')
		      			}else{
		      				lis.push('<span class="yj">'+v.name+'</span>')
		      			}
		      			
		      		});
		      		//模拟数据插入
				      setTimeout(function(){
				        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
				        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
				        next(lis.join(''), page < Math.ceil(data.count / pageNum)); //假设总页数为 10
				      }, 500);
		      	}
		      });
		      
		    }
		  });
		  
		});
		
		
		
		$.ajax({
			type:"post",
			url:"http://www.shopyun.top:8011/dp/api/echartsYear",
			async:true,
			success:function(data){
				var oneArr= [];
				var twoArr= [];
				var threeArr= [];
				var fourArr = [];
				var oneNum = 29;
				var towNum = 49;
				var threeNum = 79;
				var fourNum = 80;
				$.each(data,function(i,v){
					if(v.name <= oneNum){
						oneArr.push(v);
					}else if(v.name > oneNum && v.name <= towNum){
						twoArr.push(v);
					}else if(v.name > towNum && v.name <= threeNum){
						threeArr.push(v);
					}else if(v.name >= fourNum){
						fourArr.push(v);
					}
				})
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				app.title = '环形图';
				option = {
				    tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        x: 'right',
				        data:['0-'+oneNum ,(oneNum+1)+'-'+towNum,(towNum+1)+'-'+threeNum,fourNum+'~']
				    },
				    series: [
				        {
				            name:'访问来源',
				            type:'pie',
				            radius: ['50%', '70%'],
				            avoidLabelOverlap: false,
				            label: {
				                normal: {
				                    show: false,
				                    position: 'center'
				                },
				                emphasis: {
				                    show: true,
				                    textStyle: {
				                        fontSize: '30',
				                        fontWeight: 'bold'
				                    }
				                }
				            },
				            labelLine: {
				                normal: {
				                    show: false
				                }
				            },
				            data:[
				                {value:oneArr.length, name:'0-'+oneNum},
				                {value:twoArr.length, name:(oneNum+1)+'-'+towNum},
				                {value:threeArr.length, name:(towNum+1)+'-'+threeNum},
				                {value:fourArr.length, name:fourNum+'~'}
				            ]
				        }
				    ]
				};
				;
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				}
			}
		});
		
	</script>
	 <script type="text/javascript">
	 	$.ajax({
	 		type:"post",
	 		url:"http://www.shopyun.top:8011/dp/api/echartsEdu",
	 		async:true,
	 		success:function(data){
	 			console.log(data);
	 			var dataName = [];
	 			var dataNum = [];
	 			$.each(data.maps, function(i,v) {
	 				dataName.push(v.name);
	 				dataNum.push(v.num)
	 			});
	 			var dom = document.getElementById("container2");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				app.title = '坐标轴刻度与标签对齐';
				
				option = {
				    color: ['#C23531'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : dataName,
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'直接访问',
				            type:'bar',
				            barWidth: '60%',
				            data:dataNum
				        }
				    ]
				};
					
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				}
	 		}
	 	});
		

       </script>
	</body>
</html>
